<template>
	<view class="">
		<view class="form-body">
			<u-form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth="auto" errorType="toast">
				<u-form-item label="卡项标题" prop="name" :required="true" borderBottom>
					<u-input v-model="formData.name" border="none" placeholder="建议输入12字以内" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="卡片颜色" prop="bgColor" borderBottom>
					<view class="flex justify-end">
						<view class="padding-26" :style="{backgroundColor:formData.bgColor}" @click="$refs.colorPicker.open()"></view>
					</view>
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<u-form-item label="售卖价格" :required="true" prop="salePrice" borderBottom>
					<u-input v-model="formData.salePrice" border="none" inputAlign="right" type="number" />
					<u-icon slot="right" name="rmb" />
				</u-form-item>
				<u-form-item label="选择用户" :required="true" prop="userName" borderBottom>
					<view @click="$u.route('/pages/selectPage/client', {isRadio: true})" >
						<u-input 
							v-model="formData.userName" 
							border="none" 
							inputAlign="right" 
							disabled 
							disabledColor="#fff" 
							placeholder="请选择用户"  
						/>
					</view>
					<u-icon slot="right" name="arrow-right"  @click="$u.route('/pages/selectPage/client', {isRadio: true})"/>
				</u-form-item>
				<u-form-item label="截止日期" prop="items">
					<view @click="showTimePicker=true">
						<u-input v-model="formData.closingDate" border="none" inputAlign="right" disabled disabledColor="#fff" placeholder="选择卡项截止日期" />
					</view>
					<u-icon slot="right" name="arrow-right"/>
				</u-form-item>
				<view class="pro-box">
					<view class="fsize-26 line-gray padding-20" v-if="formData.items.length !== 0">服务项</view>
					<view class="pro-list" v-for="(im, ix) in formData.items" :key="im.projectId">
						<u-form-item borderBottom>
							<view class="flex justify-between">
								<text>{{im.projectObj.name}}</text>
								<view class="delBtn" @click="onDel(im.projectId)">删除</view>
							</view>
						</u-form-item>
						<u-form-item label="次数" labelWidth="65" borderBottom>
							<u-input v-model="im.times" type="number" border="none" placeholder="请输入数字" inputAlign="right"></u-input>
						</u-form-item>
						<u-form-item label="手工提成" labelWidth="65">
							<view class="flex">
								<view class="">
									<u-input v-model="im.manualPercentage" type="number" border="none" placeholder="请输入次数"
										inputAlign="right"></u-input>
								</view>
								<u-radio-group v-model="im.manualPercentageType" placement="row">
									<u-radio activeColor="#e54d42" :name="2" label="元"></u-radio>
									<u-radio activeColor="#e54d42" :name="1" label="%"></u-radio>
								</u-radio-group>
							</view>
						</u-form-item>
					</view>
				</view>
			</u-form>
		</view>
		<view class="addBtn">
			<u-gap height="1" bgColor="#e54d42"></u-gap>
			<view class="pt-20" @click="topro">添加项目</view>
		</view>
		<u-gap height="80"></u-gap>
		<view class="bottom-button">
			<u-button type="primary" size="large" color="#e54d42" text="确定" @click="onSubmit" />
		</view>
		<my-color-picker ref="colorPicker" @confirm="setCardBgColor"/>
		<u-datetime-picker
			:show="showTimePicker"
			v-model="datetime"
			mode="date"
			@cancel = "showTimePicker=false"
			@confirm="onConfirmDataTime"
		></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import myColorPicker from '@/components/my-color-picker/my-color-picker.vue'
	import getDateTime from '@/common/getDataTime.js'
	export default {
		components: { myColorPicker },
		data() {
			return {
				showTimePicker: false,
				isEdit: false,
				datetime:'',
				fileList: [],
				formData: {
					salePercentage: 0,
					salePercentageType: 2,
					salePrice: null,
					storeId: '',
					closingDate: '',
					attributes: [],
					bgColor:'#000',
					userName:'',
					userId: null,
					items: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入项目名称',
						trigger: ['change', 'blur']
					}],
					salePrice: [{
						validator: (rule, value, callback) => {
							return !uni.$u.test.isEmpty(value)
						},
						message: '请输入售卖价格',
						trigger: ['change','blur'],
					}],
					userName: [{
						required: true,
						message: '请选择用户',
						trigger: ['change','blur'],
					}],
					items: [{
						validator: (rule, value, callback) => {
							return !uni.$u.test.isEmpty(value.length)
						},
						message: '请添加服务项目',
						trigger: ['change','blur'],
					}],
				}
			}
		},
		onLoad() {
			let that = this
			this.datetime = getDateTime.dateTimeStr('y-m-d')
			uni.$on('event-pros', data=>{
				if(that.formData.items.length>0){
					that.formData.items = data.map(im=>{
						const found = that.formData.items.find(obj => obj.projectId === im.projectId)
						return found ? Object.assign({}, found, im) : im
					})
				}else {
					that.formData.items = data
				}
			})
			uni.$on('client', obj => {
				that.formData.userName = obj.nickName
				that.formData.userId = obj.id
			})
		},
		onUnload() {
			// 移除监听事件
			uni.$off('client')
			uni.$off('event-pros')
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			onConfirmDataTime(e){
				this.formData.closingDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showTimePicker = false
			},
			setCardBgColor(e){
				this.formData.bgColor = e.color
			},
			topro(){
				uni.$u.route('/pages/selectPage/project', { items: JSON.stringify(this.formData.items), type: '1' })
			},
			// 删除项目
			onDel(id){
				this.formData.items = this.formData.items.filter(im=>im.projectId !== id)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.formData.image = ''
			},
			onSubmit() {
				let that = this
				this.$refs.form.validate().then(res => {
					const hasEmptyMun = that.form.items.some(item => item.times === 0)
					if(!hasEmptyMun){
						this.$refs.uToast.show({ message:'请填写服务次数' })
					}else {
						console.log(that.form)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-body {
		padding: 20rpx 20rpx 0 20rpx;
		background-color: #fff;
	}

	.pro-box {
		.seims {
			font-size: 28rpx;
			padding: 20rpx;
			color: #999;
		}

		.pro-list {
			padding: 0 20rpx;
			margin-bottom: 8rpx;
			background-color: #fff;
			.delBtn {
				border: 1px #e54d42 solid;
				color: #e54d42;
				font-size: 22rpx;
				padding: 0 20rpx;
				border-radius: 6rpx;
			}
		}
	}
	.addBtn {
		background-color: #fff;
		padding:0 20rpx 20rpx 20rpx;
		text-align: center;
		color: #e54d42;
		font-size: 28rpx;
		font-weight: 600;
	}
</style>
